<!--
 * @Author: jyq
 * @Date: 2023-01-08 10:33:01
 * @LastEditTime: 2023-01-08 14:22:02
 * @LastEditors: jyq
 * @Description: 学院界面
 * @FilePath: \dcollege\src\views\contact\college.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="main">
    <div class="header">
        <var-app-bar 
        title="学院"
        text-color="black"
        color="white"
        title-position="center"
        >
    <template #left>
      <var-button
        color="transparent"
        text-color="black"
        round
        text
      >
        <var-icon name="chevron-left"  size="34" />
      </var-button>
    </template>
        </var-app-bar>
    </div>
    <div class="myinput">
        <svg t="1672721018422" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2693" width="25" height="25"><path d="M862.609 816.955L726.44 680.785l-0.059-0.056a358.907 358.907 0 0 0 56.43-91.927c18.824-44.507 28.369-91.767 28.369-140.467 0-48.701-9.545-95.96-28.369-140.467-18.176-42.973-44.19-81.56-77.319-114.689-33.13-33.129-71.717-59.144-114.69-77.32-44.507-18.825-91.767-28.37-140.467-28.37-48.701 0-95.96 9.545-140.467 28.37-42.973 18.176-81.56 44.19-114.689 77.32-33.13 33.129-59.144 71.717-77.32 114.689-18.825 44.507-28.37 91.767-28.37 140.467 0 48.7 9.545 95.96 28.37 140.467 18.176 42.974 44.19 81.561 77.32 114.69 33.129 33.129 71.717 59.144 114.689 77.319 44.507 18.824 91.767 28.369 140.467 28.369 48.7 0 95.96-9.545 140.467-28.369 32.78-13.864 62.997-32.303 90.197-54.968 0.063 0.064 0.122 0.132 0.186 0.195l136.169 136.17c6.25 6.25 14.438 9.373 22.628 9.373 8.188 0 16.38-3.125 22.627-9.372 12.496-12.496 12.496-32.758 0-45.254z m-412.274-69.466c-79.907 0-155.031-31.118-211.534-87.62-56.503-56.503-87.62-131.627-87.62-211.534s31.117-155.031 87.62-211.534c56.502-56.503 131.626-87.62 211.534-87.62s155.031 31.117 211.534 87.62c56.502 56.502 87.62 131.626 87.62 211.534s-31.118 155.031-87.62 211.534c-56.503 56.502-131.627 87.62-211.534 87.62z" fill="#bfbfbf" p-id="2694" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path></svg>
        <input class="search" type="text" placeholder="搜索"/>
    </div>
    <div class="list">
        <var-index-bar :hide-list = "true" duration="300">
    <div v-for="item in list" :key="item">
      <var-index-anchor :index="item" class="var-index-anchor__example">
       {{ item }}
      </var-index-anchor>
      <var-cell class="mycell">
        <div class="tou">
          <svg t="1673157568784" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2226" width="30" height="30"><path d="M960.512 443.392q0 8.192 0.512 38.912t0.512 71.168 0.512 85.504 0.512 81.92q0 19.456-8.704 38.912t-25.6 35.328-40.448 25.6-53.248 9.728l-637.952 0q-21.504 0-44.544-9.216t-42.496-26.112-31.744-40.96-12.288-53.76l0-439.296q0-62.464 34.304-97.792t94.72-35.328l52.224 0 105.472 0q61.44 0 131.072-0.512t130.048-0.512l101.376 0 47.104 0q23.552 0 47.616 9.216t43.008 24.576 31.232 35.84 12.288 44.032l0 11.264q-28.672 0-75.264 0.512t-102.912 1.024-119.296 1.024-124.416 1.024-117.76 0.512l-99.328 0q-25.6 0-44.544 15.872t-18.944 45.568-0.512 64-0.512 62.976l0 66.56 1.024 0 0 30.72q0 13.312 9.216 22.528t22.528 9.216 22.528-9.216 9.216-22.528l0-32.768 2.048 0-2.048-191.488 603.136 1.024q19.456 2.048 37.376 10.24t31.744 23.04 22.528 37.376 8.704 54.272z" p-id="2227" fill="#3742fa"></path></svg>      
        </div>
        <div class="name">
          <p class="myp">校长办公室</p>
        </div>
        <div class="right_icon">
          <var-icon class="righticon" size="30" color="#8c91a3" name="chevron-right" />
        </div>
      </var-cell>
      <var-cell class="mycell">
        <div class="tou">
          <svg t="1673157568784" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2226" width="30" height="30"><path d="M960.512 443.392q0 8.192 0.512 38.912t0.512 71.168 0.512 85.504 0.512 81.92q0 19.456-8.704 38.912t-25.6 35.328-40.448 25.6-53.248 9.728l-637.952 0q-21.504 0-44.544-9.216t-42.496-26.112-31.744-40.96-12.288-53.76l0-439.296q0-62.464 34.304-97.792t94.72-35.328l52.224 0 105.472 0q61.44 0 131.072-0.512t130.048-0.512l101.376 0 47.104 0q23.552 0 47.616 9.216t43.008 24.576 31.232 35.84 12.288 44.032l0 11.264q-28.672 0-75.264 0.512t-102.912 1.024-119.296 1.024-124.416 1.024-117.76 0.512l-99.328 0q-25.6 0-44.544 15.872t-18.944 45.568-0.512 64-0.512 62.976l0 66.56 1.024 0 0 30.72q0 13.312 9.216 22.528t22.528 9.216 22.528-9.216 9.216-22.528l0-32.768 2.048 0-2.048-191.488 603.136 1.024q19.456 2.048 37.376 10.24t31.744 23.04 22.528 37.376 8.704 54.272z" p-id="2227" fill="#3742fa"></path></svg>      
        </div>
        <div class="name">
          <p class="myp">校长办公室</p>
        </div>
        <div class="right_icon">
          <var-icon class="righticon" size="30" color="#8c91a3" name="chevron-right" />
        </div>
      </var-cell>
    </div>
  </var-index-bar>
    </div>
  </div>  
</template>
<script setup lang="ts">
const list = ["管理机构","教学机构","管理机构","教学机构"]
</script>
<style lang="less" scoped>
.main{
    width: 100%;
    height: 100vh;
    background-color: white;
    .header{
        font-size: 20px;
        .var-elevation--3{
            box-shadow: none;
        }
    }
    .myinput{
        width: 98%;
        height: 42px;
        margin-left: 4px;
        background-color: rgb(244,245,249);
        border-radius: 20px;
        .icon{
            float: left;
            margin-left: 23px;
            margin-top: 8px;
        }
        .search{
            background-color: rgb(244,245,249);
            width: 280px;
            height: 30px;
            border: 0;
            outline: none;
            font-size: 16px;
            margin-left: 5px;
            margin-top: 5px;
        }
      }
      .list{
        margin-top:18px;
        .mycell{
          height: 80px;
          border-bottom: 1px solid rgb(244,245,249);
          .tou{
            width: 50px;
            height: 50px;
            background-color: #d2ddff;
            border-radius: 10px;
            float: left;
            line-height: 0%;
            .icon{
              margin-top: 10px;
              margin-left: 10px;
            }
          }
          .name{
            line-height: 0%;
            font-size: 19px;
            font-weight: 600;
            float: left;
           .myp{
            margin-top: 25px;
            margin-left: 20px;
           }
          }
          .right_icon{
            float: right;
            .righticon{
              line-height: 0%;
              margin-bottom: -22px;
            }
          }
        }
      }
}
</style>

<style>
.var-index-anchor__example {
  height: 23px;
  font-size: 13px;
  color: #b2bec3;
  display: flex;
  align-items: center;
  padding: 0 12px;
  transition: all 0.25s;
  background-image: linear-gradient(to right, #e7edf7, white);
}
</style>